<template>
    <div class="batch-qrDetail-table">
        <pagination-table
            ref="batchQrDetailTable"
            :list="list"
            :options="options"
            :columns="columns"
            :pagination="pagination"
        />
        <div class="batch-qrDetail-btnlist">
            <el-button type="danger" @click.native.prevent="onSubmit" :loading="loading">确认删除</el-button>
        </div>
    </div>
</template>

<script>
// 删除
import { Test_Video_DeleteInfo } from '@/server/testVideoManage'

export default {
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data(list) {
            this.list = list.map(row=>{
                // 初始化进度为0
                row['progress'] = 0
                return row
            })
        }
    },
    data() {
        return {
            loading: false,
            list: [],
            columns: [
                {
                    width: 120,
                    prop: "taskCode",
                    label: "任务单编号",
                },
                {
                    width: 100,
                    prop: "samplePart",
                    label: "部位",
                },
                {
                    width: 80,
                    prop: "initCheck",
                    label: "初/复检",
                },
                {
                    prop: "sampleName",
                    label: "样品名称",
                },
                {
                    prop: "视频内容",
                    label: "视频内容",
                },
                {
                    width: 100,
                    label: "视频状态",
                    render: (h, params) => {
                        if ((params["row"] && params["row"]["videoStatus"] === "未录制") || (params["row"] && params["row"]["videoStatus"]===null)) {
                            return <el-tag type="warning" color={'rgba(0,0,0,0)'}>未录制</el-tag>;
                        }
                        if (params["row"] && params["row"]["videoStatus"] === "已上传") {
                            return <el-tag color={'rgba(0,0,0,0)'}>已上传</el-tag>;
                        }
                        if (params["row"] && params["row"]["videoStatus"] === "已录制") {
                            return <el-tag type="success" color={'rgba(0,0,0,0)'}>已录制</el-tag>;
                        }
                    },
                },
                {
                    label: "删除进度",
                    render: (h, params) => {
                        if (params["row"]) {
                            let progress = params["row"]["progress"]
                            return (
                                <el-progress type="circle" percentage={progress} width={48}></el-progress>
                            )
                        }
                    }
                }
            ],
            options: {
                index: true,
                loading: false,
                initTable: false,
                border: false,
                selection: false,
                mutiSelect: false,
                headerCellStyle: {
                    backgroundColor: "#E8F3FF",
                    color: "#3D4256 ",
                },
            },
            pagination: {
                show: false
            }
        };
    },
    methods: {
        onSubmit() {
            let index = 0
            let length = this.list.length
            this.loading = true
            let loopCall = async (row) => {
                // 调用上传接口
                const res = await Test_Video_DeleteInfo(row['sampleId'])
                if (res.code !== 200) return
                // 设置进度完成
                this.$set(this.list, index, {...row, progress: 100})
                // 增加索引
                index++
                // 循环结束
                if( index === length ) {
                    let timer = setTimeout(() => {
                        clearTimeout(timer)
                        this.loading = false
                        this.$currentDialog.close()
                    }, 1200)
                    return
                }
                // 调用下一个
                loopCall(this.list[index])
            }
            // 调用
            loopCall(this.list[index])
        }
    }
};
</script>

<style lang="scss" scoped>
.batch-qrDetail {
    padding: 5px 0;
    overflow: hidden;
    &-table {
        color: #fff;
    }
    &-btnlist {
        display: flex;
        justify-content: flex-end;
        margin-top: 44px;
    }
}
</style>